import React from 'react';
// import { useRoutes } from 'react-router-dom'
import { BrowserRouter, Link } from 'react-router-dom'
import './App.css';
import Basics from './views/Basics';

const App: React.FC = (): JSX.Element => {

  // const routing = useRoutes([
  //   {
  //     path: '/',
  //     element: <Basics />
  //   },

  // ])

  return (
    <div className='App'>
      测试
      {/* 先做一个简单的路由跳转 */}
      <BrowserRouter>
        <h3>
          <Link to='/qk-micro-react'>微前端react</Link>
        </h3>
        <h3>
          <Link to='/qk-micro-vue'>微前端vue</Link>
        </h3>
      </BrowserRouter>
      {/* id要与 registerMicroApps 当中的container 对齐 */}
      {/* react子应用挂载容器 id=qk-micro-react */}
      <div id='qk-micro-react'></div>
      {/* vue子应用挂载容器 id=qk-micro-vue */}
      <div id='qk-micro-vue'></div>
    </div>
  )
}


export default App;
